<template>
    <div class="editBlog">
        <div class="editTop">
            <el-input v-model="blogInfo.title"  placeholder="输入文章标题"></el-input>
            <el-button @click="preAddBLog" style="margin-left:10px;" type="primary" icon="Promotion">发布文章</el-button>
        </div>
        <md-editor class="mde" v-model="blogInfo.content"></md-editor>
        <el-dialog v-model="showAddBlog" title="发布设置">
            <el-form :model="blogInfo">
                <el-form-item label="文章描述">
                    <el-input v-model="blogInfo.describe" type="textarea" placeholder="输入文章描述" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" @click="showAddBLog=false">取消</el-button>
                    <el-button @click="addBlog" type="primary">发布</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css';
import {addBlog, blogDetail, setBlog} from '../../js/blog.js'
import { ElMessage } from 'element-plus';
export default {
    components:{
        MdEditor
    },
    data(){
        return{
            showAddBlog: false,
            blogInfo:{
                title: '',
                content: '',
                describe: '',
            },
            isUpdate: false,
            blogId: 0,
        }
    },
    methods:{
        preAddBLog(){
            if(this.blogInfo.title.trim()=='' || this.blogInfo.content.trim()==''){
                ElMessage({type:'warning',message:'文章标题和文章内容不能为空'})
                return;
            }
            this.showAddBlog = true;
        },
        addBlog(){
            let blog = {
                blogTitle: this.blogInfo.title,
                blogInfo: this.blogInfo
            }
            if(!this.isUpdate){
                addBlog(blog).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg})
                    this.showAddBlog = false;
                })
            }else{
                blog.id = this.blogId;
                setBlog(blog).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg})
                    this.showAddBlog = false;
                })
            }
            
        },
        getBlogDetail(id){
            blogDetail({id:id}).then(res=>{
                this.blogInfo = res.data.blogInfo
            })
        }
    },
    mounted(){
        let id = this.$route.query.id;
        if(id!=null&&id!=undefined){
            this.getBlogDetail(id);
            this.blogId = id;
            this.isUpdate = true;
            console.log("修改模式")
        }else{
            console.log("编辑模式")
        }
    }
    
}
</script>
<style scoped>
.editBlog{
    height: calc(100vh - 100px);
}
.mde{
    width: 100%;
    height: 100%;
}
.editTop{
    height: 30px;
    display: flex;
    margin: 10px;
}
</style>